<template>
<div id="main">
    <el-container class="containerA">
        <!--侧边栏-->
  <el-aside :width="iscollapse ? '64px' : '200px'">
    <common-aside></common-aside>    
  </el-aside>
  <el-container>
    <!--头部区域-->
    <el-header>
     <common-header></common-header>
    </el-header>
 
     <common-tag></common-tag>

    <!--主体区域-->
    <el-main>
     <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</div>
</template>

<script>
//引入commonAside组件
import commonAside from "../components/commonAside.vue"
//引入commonHeader组件
import commonHeader from "@/components/commonHeader.vue";
//引入commonTag组件
import commonTag from "../components/commonTag.vue"
import { mapState } from "vuex"
export default {
    data() {
        return {

        }
    },
    components: {
        commonAside,
        commonHeader,
        commonTag
    },
    computed: {
        ...mapState('my-tab', ['iscollapse'])
    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
.el-header {
    background-color: #333;
}

.el-aside {
    background-color: #545c64;
}

.el-main {
    background-color: #eaedf1
}

#main,
.containerA {
    height: 100%
}
</style>